<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
  <style>
      [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="main" style="max-width:600px;margin-top:30px">
          <div class="action row">
            <div class="col-md-3">
              <input type="text" v-model="item.itemName" placeholder="商品名称" class="form-control">
            </div>
            <div class="col-md-3">
              <input type="text" v-model.number="item.itemPrice" placeholder="商品单价" class="form-control">
            </div>
            <div class="col-md-3">
              <input type="text" v-model.number="item.itemNum"  placeholder="购买数量" class="form-control">
            </div>
            <div class="col-md-3">
              <button class="btn" @click="addItem">增加商品</button>
            </div>
          </div>  
          <table v-cloak class="table table-bordered table-striped table-hover table-condensed">
            <tr>
              <th>商品名称</th>
              <th>商品价格</th>
              <th>商品数量</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
            <tr 
              v-for="(item,index) in items"
              :key="index"
            >
              <td>
                <input type="checkbox" 
                  @change="singleCheck"
                  v-model="item.checked">
                {{item.itemName}}
              </td>
              <td>
               ￥ {{item.itemPrice.toFixed(2)}}
              </td>
              <td>
                <button 
                  @click="addNum(index)"
                  class="btn btn-xs">+</button>
                {{ item.itemNum }}
                <button
                  @click="reduceNum(index)"
                  class="btn btn-xs">-</button>
              </td>
              <td>
                ￥{{ (item.itemPrice * item.itemNum).toFixed(2)}}
              </td>
              <td>
                <button 
                  @click="delItem(index)"
                  class="btn btn-danger btn-xs">删除</button>
              </td>
            </tr>
            
            <tr>
              <td>
                <input type="checkbox" 
                  @change="allCheck"
                  v-model="isAllChecked">
                全选
                
              </td>
              <td colspan="4">
                
                总价格：
                  ￥{{total}}
              </td>
            </tr>
          </table>
      </div>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data:{ 
        item:{
          itemName: '',
          itemPrice: 0,
          itemNum: 0
        },
        items: [
          {
            itemName:"商品1",
            checked: true,
            itemPrice: 10.33,
            itemNum: 2
          },
          {
            itemName:"商品2",
            checked: true,
            itemPrice: 15.89,
            itemNum: 4
          },
          {
            itemName:"商品3",
            checked: true,
            itemPrice: 16.56,
            itemNum: 8
          },
          {
            itemName:"商品4",
            checked: true,
            itemPrice: 18,
            itemNum: 9
          }
        ],
        total:0,
        isAllChecked: true
      },
      mounted () {
        // 在页面渲染完毕后自动调用 只在初始的时候调用一次，刷新时，不会再调用
        this.calcTotal()
      },
      methods: { 
        addItem () {
          // 新增商品
          /* const item = {
            ...this.item,
            checked: true
          } */
          const item = Object.assign({checked:true},this.item)
          this.items.push(item)
          this.calcTotal()
        },
        delItem (index) {
          // 删除商品
          if (confirm('确认删除吗?')) {
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        allCheck () {
          // 改变全选状态 取消商品选中
          console.log(this.isAllChecked)
          this.items.forEach(el=>{ el.checked = this.isAllChecked })
          this.calcTotal();
        },
        singleCheck () {
          /* 
          判断是否所有的商品都被选中了 如果 不是 
          则取消全选
          否则 选中全选
           */
          const allChecked = this.items.every(item=>item.checked)
          console.log(allChecked)
          this.calcTotal();
          // 单选选中状态 改变全选
          this.isAllChecked = allChecked;
        },
        addNum (index) {
          // 增加商品数量
          this.items[index].itemNum++;
          this.calcTotal();
        },
        reduceNum (index) {
          // 减少商品数量
          this.items[index].itemNum--;
          if (this.items[index].itemNum <= 1) {
            this.items[index].itemNum = 1;
          }
          this.calcTotal();
        },
        calcTotal(){
          /* 
          所有选中商品的 数量*单价 总和
           */
          /* const checkItems = this.items.filters(function(item){
            return item.checked
          }) */
          this.total = 0;
          const checkedItems = this.items.filter(item=>item.checked);
          checkedItems.forEach(el=>{
            this.total += el.itemNum*el.itemPrice
          })
          this.total = parseFloat(this.total.toFixed(2));
        }
      }
    })
  </script>
</body>
</html>